<template>
	<view>
		<view class="mid-content">
			<!--
			    author: 李文昊
			    bottomNavList: 9宫格业务办理列表
				viwidth():计算宽度
				toUrl:包裹内容定义跳转方法
			-->
			<view :style="{'width':uiWidth}" class="content-item" v-for="(item,index) in bottomNavList" :key="index">
				<view class="toUrl" @click="toUrl(item.href)">
					<view style="margin-top: 20rpx;">
						<i v-if="item.pendingNum > 0" class="tip"></i>
						<image class="nav-imgbo" :src="item.imgurl"></image>
					</view>
					<text class="nav-span">{{item.name}}</text>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		syncGetOrderList,
	} from "../../util/network.js"
	export default {
		data() {
			return {
				bottomNavList: [{
						id: 0,
						name: "物品放行申请",
						href: "/pages/itemsReleaseApplication/history/history",
						imgurl: require('@/static/home/home-luggage.png')
					},
					{
						id: 1,
						name: "门禁卡申请",
						href: "/pages/accessCardApplication/history/history",
						imgurl: require('@/static/home/home-access.png')
					},
					{
						id: 2,
						name: "白卡管理",
						href: "/pages/whiteCardApplication/applicationHistory/applicationHistory",
						imgurl: require('@/static/home/home-whiteCard.png')
					},
					{
						id: 3,
						name: "停车卡申请",
						href: "/pages/parkingCardApplication/history/history",
						imgurl: require('@/static/home/home-parking.png')
					},
					{
						id: 4,
						name: "空调加时",
						href: "/pages/airConditionApplication/history/history",
						imgurl: require('@/static/home/home-condition.png')
					},
					{
						id: 5,
						name: "会议室预约",
						href: '/pages/conferenceRoom/appointmentRecord/appointmentRecord',
						imgurl: require('@/static/home/home-conference.png')
					},
					{
						id: 6,
						name: "维修服务",
						href: "/pages/repair/history/history",
						imgurl: require('@/static/home/home-repair.png')
					},
					{
						id: 7,
						name: "装修施工",
						href: "/pages/decorationConstruction/history/history",
						imgurl: require('@/static/home/home-decoration.png')
					},
					{
						id: 8,
						name: "发票申请",
						href: "/pages/invoiceApplication/history/history",
						imgurl: require('@/static/home/home-invoice.png')
					},
				]
			}
		},
		computed: {
			uiWidth() {
				return 100 / 3 + '%';
			}
		},
		methods:{
			toUrl(urlValue){
				let a = syncGetOrderList("goods-release/list", [0], 0, 8)
				 a.then((res)=>{
					 if(res.data.code == 200){
						uni.navigateTo({
							url: urlValue
						});
					}else {
						uni.navigateTo({
							url: '/pages/login/login'
						});
					}
				})
			},
			reFreshPendingNum(){
				this.bottomNavList =  [{
						id: 0,
						name: "物品放行申请",
						href: "/pages/itemsReleaseApplication/history/history",
						imgurl: require('@/static/home/home-luggage.png'),
						pendingNum:this.$pendingObj.pendingObj.goodsRelease
					},
					{
						id: 1,
						name: "门禁卡申请",
						href: "/pages/accessCardApplication/history/history",
						imgurl: require('@/static/home/home-access.png'),
						pendingNum:this.$pendingObj.pendingObj.accessCard
					},
					{
						id: 2,
						name: "白卡管理",
						href: "/pages/whiteCardApplication/applicationHistory/applicationHistory",
						imgurl: require('@/static/home/home-whiteCard.png'),
						pendingNum:this.$pendingObj.pendingObj.whiteCard
					},
					{
						id: 3,
						name: "停车卡申请",
						href: "/pages/parkingCardApplication/history/history",
						imgurl: require('@/static/home/home-parking.png'),
						pendingNum:this.$pendingObj.pendingObj.parkingCard
					},
					{
						id: 4,
						name: "空调加时",
						href: "/pages/airConditionApplication/history/history",
						imgurl: require('@/static/home/home-condition.png'),
						pendingNum:this.$pendingObj.pendingObj.airCondition
					},
					{
						id: 5,
						name: "会议室预约",
						href: '/pages/conferenceRoom/appointmentRecord/appointmentRecord',
						imgurl: require('@/static/home/home-conference.png'),
						pendingNum:this.$pendingObj.pendingObj.conferenceRoom
					},
					{
						id: 6,
						name: "维修服务",
						href: "/pages/repair/history/history",
						imgurl: require('@/static/home/home-repair.png'),
						pendingNum:this.$pendingObj.pendingObj.repair
					},
					{
						id: 7,
						name: "装修施工",
						href: "/pages/decorationConstruction/history/history",
						imgurl: require('@/static/home/home-decoration.png'),
						pendingNum:this.$pendingObj.pendingObj.decoration
					},
					{
						id: 8,
						name: "发票申请",
						href: "/pages/invoiceApplication/history/history",
						imgurl: require('@/static/home/home-invoice.png'),
						pendingNum:this.$pendingObj.pendingObj.invoice
					},
				]
			}
		}
	}
</script>

<style>
	.mid-content {
		width: 100%;
		overflow: hidden;
	}

	.content-item {
		float: left;
		height: 230rpx;
		text-align: center;
		border-right: 0rpx solid rgba(238, 238, 238, 1);
		font-size: 0;
	}

	.nav-imgbo {
		height: 100rpx;
		width: 100rpx;
		margin-top: 20rpx;
	}

	.nav-span {
		white-space: normal;
		display: block;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		margin-top: 10rpx;
		color: #212121;
	}
	.tip {
		display:block;
		background:#f00;
		border-radius:50%;
		width:20rpx;
		height:20rpx;
/* 		top:-20px;
		right:0px; */
		margin-left: 200rpx;
		margin-top: -20rpx;
	}
</style>
